<!doctype html>
<html  class="x-admin-sm">
<head>
	<meta charset="UTF-8">
	<title>管理登录</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/login.css">
	  <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/crypto-js.js"></script>

</head>
<body class="login-bg">
    
    <div class="login layui-anim layui-anim-up" style ="margin:0 auto 0 auto">
        <div class="message">账号注册</div>
        <div id="darkbannerwrap"></div>
        
        <form method="post" class="layui-form" >
            <!-- 隐藏域,角色2代表管理员 -->
            <div>
            	<span>已有账号？ </span><a href="./login.html">登录</a>
            </div>
            
        	<span>昵称 </span><span id ="nameVerification" style ="color:red"> </span>
        	<input id="userName" name="userName" placeholder="昵称"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
        	<span>手机号 </span><span id ="mobileVerification" style ="color:red"> </span>
            <input id="mobile" name="mobile" placeholder="手机号"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            <span>密码 </span><span id ="passwordVerification" style ="color:red"> </span>
            <input id="password" name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input" >
            <hr class="hr15">
            
            <span>再次输入密码 </span><span id ="passwordAgainVerification" style ="color:red"></span>
            <input id="passwordAgain" name="passwordAgain" lay-verify="required" placeholder="密码"  type="password" class="layui-input" >
            <hr class="hr15">
            <div class="message" id="register">注册</div>
            <hr class="hr20" >
        </form>
    </div>

    <script>
    function encrypt(str) {
	      //密钥--应和后台java解密或是前台js解密的密钥保持一致（16进制）
	      var key = CryptoJS.enc.Utf8.parse("0102030405060708");//密钥，128位加密密钥为16位
		  var content= CryptoJS.enc.Utf8.parse(str);//需要加密的内容
		  var encrypted = CryptoJS.AES.encrypt(content, key, {iv: key,mode:CryptoJS.mode.CBC}); //加密内
	      return encrypted.toString();
    } 
		$(function() {
			var i = 0;
			var j = 0;
			var x = 0;
			var y = 0;
			//昵称框验证
			$("#userName").blur(function() {
				let name = $(this).val();
				if (name==""){
					$("#nameVerification").text("请输入用户名");
					i=0;
				}else if(name.length>=6){
					$("#nameVerification").text("用户名不超过6位数");
					i=0;
				}else{
					$("#nameVerification").text(" ");
					i=1;
				}
			})
			
			//手机号验证
			$("#mobile").blur(function() {
				let mobile = $("#mobile").val()
				var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; 
				if (mobile==""){
					j=0;
					$("#mobileVerification").text("请输入手机号");
				}else if(!reg.test(mobile)){
					j=0;
					$("#mobileVerification").text("请输入正确的手机号");
				}else{
					$.ajax({
						type:"get",
						url:"../register",
						data:{
							op:"findMobile",  // 请求
							mobile:$("#mobile").val(),
						},
						dataType:"json",
						success:function(result){ // result是一个PageInfo对象
							if(result == 0){
								j=1;
								$("#mobileVerification").text(" ");
							}else{
								j=0;
								$("#mobileVerification").text("该手机号已被占用");
							}
						}
					});
				}
			})
			
			//密码框验证
			$("#password").blur(function() {
				let password = $(this).val();
				if (password==""){
					x=0;
					$("#passwordVerification").text("请输入密码");
				}else if(password.length<6 || password.length>12){
					x=0;
					$("#passwordVerification").text("密码在6-12位");
				}else{
					x=1;
					$("#passwordVerification").text(" ");
				}
			})
			
			//再次密码框验证
			$("#passwordAgain").keyup(function() {
				let passwordAgain = $(this).val();
				if (passwordAgain==""){
					y=0;
					$("#passwordAgainVerification").text("请输入密码");
				}else if(passwordAgain!=$("#password").val()){
					y=0;
					$("#passwordAgainVerification").text("两次密码不同");
				}else{
					y=1;
					$("#passwordAgainVerification").text(" ");
				}
			})
			
			//表单异步提交
			$("#register").click(function(){
				if(i+j+x+y == 4){
					$.ajax({
						type:"get",
						url:"../register",
						data:{
							op:"user",  // 请求
							userName:$("#userName").val(),
							mobile:$("#mobile").val(),
							password:encrypt($("#password").val())
						},
						dataType:"json",
						success:function(result){ // result是一个PageInfo对象
							if(result != ""){
								alert("您的QQ号为:"+result+" 可用于登录");
							}
							window.location = "./login.html";
						}
					})
				}
				
			})
		})
	</script>
   
</body>
</html>